<template>
  <div class="event-dispose">
    <el-card>
      <div class="top-search" v-has-permi="['event:dispose:query']">
        <el-form :model="queryParams" label-width="auto" :inline="true" @submit.prevent>
          <el-form-item label="事件标题">
            <el-input v-model="queryParams.title" placeholder="请输入" @keydown.enter="getList"> </el-input>
          </el-form-item>
          <el-form-item label="认领状态">
            <el-select v-model="queryParams.type" placeholder="请选择" @change="getList">
              <el-option label="未认领" :value="1" />
              <el-option label="我的认领" :value="2" />
            </el-select>
          </el-form-item>

          <el-form-item label="">
            <el-button  type="primary" @click="getList">查询</el-button>
            <el-button  plain @click="resertList">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="table-content">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column property="title" label="事件标题" show-overflow-tooltip />
          <el-table-column width="180" property="occurTime" label="发生时间"> </el-table-column>
          <el-table-column property="occurPlace" label="发生地点"> </el-table-column>

          <el-table-column property="impactLevel" label="事件影响度"
            ><template #default="scope">{{ impactLevel[scope.row.impactLevel] || '' }} </template>
          </el-table-column>
          <el-table-column property="eventLevel" label="事件优先级">
            <template #default="scope">{{ eventLevel[scope.row.impactLevel] || '' }} </template>
          </el-table-column>
          <el-table-column property="eventTypeName" label="事件分类名称"> </el-table-column>
          <el-table-column property="solveName" label="认领人"> </el-table-column>
          <el-table-column property="resolveStatus" label="事件状态">
            <template #default="scope"> {{ resolveStatus[scope.row.resolveStatus] }} </template>
          </el-table-column>
          <el-table-column property="name" label="操作">
            <template #default="scope">
              <div>
                <el-button v-has-permi="['event:dispose:claim']" plain size="small" v-if="scope.row.resolveStatus==0" @click="enterClaim(scope.row)">认领</el-button>
                <el-button v-has-permi="['event:dispose:solve']" plain size="small" v-if="scope.row.resolveStatus==1" @click="enterSolve(scope.row)">解决</el-button>
                <el-button v-has-permi="['event:dispose:detail']" plain size="small" v-if="scope.row.resolveStatus==2" @click="enterView(scope.row)">查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </el-card>

    <!-- 事件解决抽屉 -->
    <el-drawer v-model="solvDdrawerFlag" size="60%" :direction="'rtl'" :title="solvDdrawerTitle" :close-on-click-modal="false">
      <template #default>
        <div>
          <solve-drawer ref="resveDrawRef" :rowID="rowID" :getList="getList"></solve-drawer>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button type="primary" @click="enterSolveSubmit">确认</el-button>
          <el-button @click="solvDdrawerFlag = false">取消</el-button>
        </div>
      </template>
    </el-drawer>

    <!-- 详情抽屉 -->
    <el-drawer v-model="viewdrawerFlag" :title="'详情'" direction="rtl" size="70%" :close-on-click-modal="true">
      <el-descriptions title="事件录入信息：">
        <el-descriptions-item label="标题：">{{detailInfo?.title || '-' }}</el-descriptions-item>
        <el-descriptions-item label="申报人：">{{detailInfo?.registerName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="发生时间：">{{detailInfo?.occurTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="发生地点：">{{detailInfo?.occurPlace || '-' }}</el-descriptions-item>
        <el-descriptions-item label="事件描述：">{{detailInfo?.eventDetail || '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="事件处理信息：">
        <el-descriptions-item label="事件影响度：">{{ impactLevel[detailInfo?.impactLevel]  || '-' }} </el-descriptions-item>
        <el-descriptions-item label="事件优先级：">{{ eventLevel[detailInfo?.eventLevel]  || '-' }} </el-descriptions-item>
        <el-descriptions-item label="关联资产名称：">{{detailInfo?.assersName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="事件状态：">{{ resolveStatus[detailInfo?.resolveStatus]  || '-' }}</el-descriptions-item>
        <el-descriptions-item label="认领人：">{{detailInfo?.solveName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="协作解决人：">{{detailInfo?.cooperationName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="处理时间：">{{detailInfo?.disposeTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="完成时间：">{{detailInfo?.finishTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="解决方案：">{{detailInfo?.solvePlan || '-' }}</el-descriptions-item>
        <el-descriptions-item label="处理进度：">{{  solveLevel[detailInfo?.solveLevel]  || '-' }}</el-descriptions-item>
        <el-descriptions-item label="事件分类名称：">{{detailInfo?.eventTypeName || '-' }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="配件更换信息：">
        <el-descriptions-item label="更换配件：" v-if="detailInfo?.parts==1"> {{ detailInfo?.parts==1?'不更换':'-' }} </el-descriptions-item>
        <el-descriptions-item label="更换配件：" v-if="detailInfo?.parts==0">
          <el-table :data="detailInfo?.partsList" style="width: 100%" border>
            <el-table-column prop="partsName" label="备件名称："> </el-table-column>
            <el-table-column prop="partsId" label="备件号："> </el-table-column>
            <el-table-column prop="partsNumber" label="备件序列号："> </el-table-column>
            <el-table-column prop="newPartsNumber" label="新件序列号："> </el-table-column>
          </el-table>
        </el-descriptions-item>  
      </el-descriptions>  
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import  SolveDrawer from './SolveDrawer.vue'
import {impactLevel,eventLevel,resolveStatus } from './config'
import {solveLevel} from '../enter/config.ts'
import { ref, reactive, toRefs } from 'vue';
import { ElTable } from 'element-plus';
import {eventDisposeList,eventDisposeClaim ,eventEnterDetail} from '@/api/event'

const total = ref(1);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    title: '',
  type:''
  },
  tableData:[],
  solvDdrawerFlag:false,
  solvDdrawerTitle:'事件解决',
  viewdrawerFlag:false

});
const { queryParams ,tableData ,solvDdrawerFlag,solvDdrawerTitle ,viewdrawerFlag} = toRefs(data);

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref([]);
const resveDrawRef = ref([]);

const handleSelectionChange = (val: any) => {
  console.log(val);

  multipleSelection.value = val;
};




/* 事件认领 */
const enterClaim  = (row:any)=>{
  ElMessageBox.confirm(
    '确认要认领该事件吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        const res=  await eventDisposeClaim(row.id)
        console.log(res);
        if(res.data){
          ElMessage.success('认领成功')
          await getList()
        }

    })
    .catch(() => {
    })
}

const rowID  = ref('')
/* 事件解决 */
const enterSolve = (row:any)=>{
  solvDdrawerFlag.value = true
  rowID.value = row.id
}
const enterSolveSubmit = async()=>{
  const res= await resveDrawRef.value?.enterSubmit()
  console.log(res);
  
  if(res){
    solvDdrawerFlag.value = false

    setTimeout(async() => {
      await getList()
    }, 10);
  }


}

/* 查看 */
const enterView = async(row)=>{
await getDetail(row.id)
viewdrawerFlag.value = true
}


const detailInfo = ref()
const getDetail = async(id)=>{
const res = await eventEnterDetail({id})
console.log(res);
detailInfo.value = res.data

}

const resertList =async ()=>{
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    title: '',
  }

  await getList()
}

const getList = async() => {
  /* 完成之后 关闭抽屉 */
  solvDdrawerFlag.value = false
  const res=  await eventDisposeList({...queryParams.value})
  if(res){
    tableData.value = res.rows
    total.value = res.total
  }
  console.log('getList');
};
getList()
</script>

<style scoped lang="scss">
.event-dispose {
  padding: 8px;
  width: 100%;
  height: 100%;
  .el-card {
    width: 100%;
    height: 100%;
    .table-top {
      margin-bottom: 20px;
    }
    .table-content {
      width: 100%;
    }
  }
}
</style>
